<template>
  <div class="address">
    <p class="title">退货地址</p>
    <div class="adress_table">
      <el-table border :data="list" ref="tableRef" :height="tableHeight">
        <el-table-column label="收货人" prop="shippingPerson" />
        <el-table-column label="联系电话" prop="shippingMobile" />
        <el-table-column label="收货地址" prop="shippingAddressDetail" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { calcTableHeight } from '@/assets/js/utils.js'
const { tableRef, tableHeight } = calcTableHeight()
defineProps(['list'])

</script>

<style scoped lang="scss">
.address {
  padding: 20px 80px 20px 20px;
  margin-top: 10px;
  background-color: #fff;

  .title {
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
  }

  .adress_table {
    margin-top: 20px;

    .el-table {
      :deep(tr) {
        th,
        td {
          border-right: 0;
        }

        th {
          background-color: #fafafa;
        }
      }

      :deep(tr):hover {
        background-color: #f5f7fa;
      }

      :deep(thead) {
        font-size: 14px;
        color: var(--span-color-text);
        line-height: 16px;
        height: 47px;
      }

      :deep(tbody) {
        tr {
          height: 64px;
        }
      }
    }
  }
}
</style>
